<!-- 
	带箭头的多级下拉框 
	1.treeData：下拉数据源
	2.value：默认值
	3.clearable：是否带清空按钮：true带，false不带
	4.filterable：是否带搜索框：true带，false不带
	5.disabled：指定节点选择框是否禁用为节点对象的某个属性值
	6.defaultProps：节点属性值，里面值为：
		{
			label："", //指定节点标签为节点对象的某个属性值
			children:"",//指定子树为节点对象的某个属性值
			disabled:"",//指定节点选择框是否禁用为节点对象的某个属性值
			isLeaf:"",//指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
		}
	7.placeholder：输入关键字进行过滤
	8.size：输入框尺寸
	9.nodeKey：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
-->
<template>
	<el-select v-bind="selectConfig" v-model="inputValue" :disabled="disabled" @change="handleSelectChange" @visible-change="handleVisibleChange">
		<el-option hidden :value="inputValue" :label="valueTitle" v-if="treeData.length > 0" />
		<el-tree v-bind="treeConfig" :data="treeData" :current-node-key="inputValue" @node-click="handleNodeClick"></el-tree>
	</el-select>
</template>

<script>
export default {
	name: 'swSearchTreeSelect',
	props: {
		value: { type: String, default: '' },
		treeData: { type: Array, default: () => [] },
		clearable: { type: Boolean, default: false },
		filterable: { type: Boolean, default: false },
		disabled: { type: Boolean, default: false },
		defaultProps: {
			type: Object,
			default() {
				return { label: 'label', children: 'children' };
			}
		},
		nodeKey: { type: String, default: 'id' },
		placeholder: String,
		size: String
	},
	data() {
		return {
			inputValue: this.value,
			isShowPulldown: false,
			valueTitle: '',
			selectConfig: {
				ref: 'select',
				size: this.size,
				style: { width: '100%' },
				clearable: this.clearable,
				popperAppendToBody: false,
				filterable: this.filterable,
				placeholder: this.placeholder,
				filterMethod: this.handleFilterMethod
			},
			treeConfig: {
				ref: 'selectTree',
				nodeKey: this.nodeKey,
				highlightCurrent: true,
				defaultExpandAll: true,
				expandOnClickNode: false,
				props: this.defaultProps,
				class: 'select_tree_wrapper',
				filterNodeMethod: this.handleFilterNode
			}
		};
	},
	watch: {
		value(val) {
			this.inputValue = val;
		},
		inputValue: {
			handler(val) {
				this.$emit('input', val);
				let treeFlatData = this.treeToFlatData(this.treeData);
				let selectedData = treeFlatData.find((item) => item.id === val);
				if (!selectedData) {
					this.valueTitle = '';
					this.$nextTick(() => {
						this.$refs['selectTree'].setCurrentKey(null);
					});
				} else {
					this.valueTitle = selectedData.name;
				}
			},
			immediate: true
		}
	},
	methods: {
		//选中的选项
		handleNodeClick(data) {
			this.inputValue = data.id;
			this.$refs['select'].blur();
		},
		treeToFlatData(dataSource) {
			let flatArr = [];
			let dataArr = JSON.parse(JSON.stringify(dataSource));
			const flatFunc = (arr) => {
				arr.forEach((item) => {
					flatArr.push(item);
					if (!!item[this.defaultProps.children] && item[this.defaultProps.children].length > 0) {
						flatFunc(item[this.defaultProps.children]);
					}
					delete item[this.defaultProps.children];
				});
			};
			flatFunc(dataArr);
			return flatArr;
		},

		//选择改变
		handleSelectChange(data) {
			this.inputValue = '';
		},

		//下拉框打开关闭
		handleVisibleChange(flag) {
			if (!flag) return false;
			this.$refs['selectTree'].filter(null);
		},

		handleFilterMethod(val) {
			this.$refs['selectTree'].filter(val);
		},

		//筛选树形分类数据
		handleFilterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		}
	}
};
</script>
<style lang="scss" scoped>
.el-select-dropdown__item {
	display: none;
	height: auto;
	padding: 0;
	font-weight: normal;
}
.select_tree_wrapper::v-deep {
	.el-tree-node__content {
		height: 32px;
	}
	.el-tree-node__label {
		padding-right: 15px;
	}
}
</style>
